<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>

  <body>
    <div id="app"> 
		<div class="form">
			<div class="card" :style="cardStyle">
				<h3>蓝桥校园一卡通</h3>
				<div class="info">
					<div class="item">姓名：{{form.name}}</div>
					<div class="item">学号：{{form.no}}</div>
					<div class="item">学院：{{form.college}}</div>
				</div>
			</div>
			<div class="content">
				<el-form ref="form" :rules="rules" :model="form" label-width="70px">
					<el-form-item label="姓名" prop="name">
					    <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
					</el-form-item>
					<el-form-item label="学号" prop="no">
					    <el-input v-model.number="form.no" placeholder="请输入学号"></el-input>
					</el-form-item>
					<el-form-item label="学院" prop="college">
					    <el-select v-model="form.college" @change="change" placeholder="请选择">
					        <el-option
					          v-for="item in options"
					          :key="item.value"
					          :label="item.label"
					          :value="item.value">
					        </el-option>
					      </el-select>
					</el-form-item>
					<button @click.prevent="submit">制卡</button> 
				</el-form> 
			</div>
		</div>
    </div>
    <script> 
      const app = new Vue({
        el: "#app",
        data: {
			form: {
				name: '',
				no: '',
				college: ''
			}, 
		   options: [{
			 value: '软件工程学院',
			 label: '软件工程学院'
		   }, {
			 value: '信息技术学院',
			 label: '信息技术学院'
		   }, {
			 value: '数字媒体学院',
			 label: '数字媒体学院'
		   }, {
			 value: '计算机科学学院',
			 label: '计算机科学学院'
		   }], 
		   cardStyle: {},
		   rules: {
			  name: [
					{ required: true, message: '请输入姓名', trigger: 'blur' },
					{ min: 2, max: 4, message: '长度在 2 到 4 个字', trigger: 'blur' }
			  ],
			  no: [ 
				{ required: true, message: '请输入学号', trigger: 'blur' },
				{ type: 'number', message: '学号必须为数字值'},
				
			  ],
			  college: [
				  { required: true, message: '请选择所在学院', trigger: 'change' }
			  ]
		   } 
        }, 
		methods: {
			submit(e) {
				this.$refs['form'].validate((valid) => {
				  if (valid) {    
					this.cardStyle = {
						 animation: 'showCard 0.4s forwards'
					} 
					this.$message({
					  message: '恭喜你，成功制卡',
					  type: 'success'
					});
				  } else { 
					  this.$message({
						message: '提交错误！请检查输入内容',
						type: 'warning'
					  }); 
				  }
			     }); 
				  
			},
			change(e) {
				console.log(e);
				this.college = e;
			}
		}
      }); 
    </script>
  </body>
</html>
